<!--
 * @Author: thinker_cy
 * @Date: 2025-07-02 16:43:28
 * @FilePath: \weimai-admin\src\pages\index\index.vue
 * @Description: 
-->
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import http from '@/api/index.js'
import { dateFormatter } from '@/utils/formatTime.js'

const router = useRouter();

let total = ref(0)
const tableData = ref([])
const queryParams = reactive({
  pageNo: 1,
  page_size: 10
})
const getList = async () => {
  const result = await http.getCluePage(queryParams)
  tableData.value = result.records
  total.value = result.total
}

const handleCurrentPage = () => {
  getList()
}

const handleLogout = () => {
  localStorage.removeItem('userName')
  router.push('/login')
}

const handleEdit = (row) => {
  router.push({
    path: '/edit',
    query: {
      id: row.id
    }
  })
}

const handleDelete = async (row) => {
  await http.deleteClue(row.id)
  getList()
}

let userName = localStorage.getItem('userName')
onMounted(() => {
  getList()
})
</script>

<template>
  <div style="background: #F5F5F5;height: 100%;">
    <!-- <div class="flex justify-between items-center" style="height: 50px; padding: 0 40px;">
      <img src="@/assets/imgs/logo.png" alt="" style="width: 50px; height: 30px;">
      <div class="flex" style="top:40px; right: 20px;">
        <span style="margin-right: 20px;">{{ userName }}</span>
        <el-button link  @click="handleLogout">退出登录</el-button>
      </div>
    </div> -->
    <div class="card-box flex justify-between">
      <div></div>
      <div><el-button color="#E60012" @click="getList">刷新列表</el-button></div>
    </div>
    <div class="card-box">
      <el-table :data="tableData" class="w-100">
        <el-table-column prop="createTime" label="留资时间">
          <template #default="{row}">
            {{ dateFormatter(row.createTime) }}
          </template>
        </el-table-column>
        <el-table-column prop="clueName" label="留资险种名称" />
        <el-table-column prop="userName" label="客户姓名" />
        <el-table-column prop="phone" label="联系电话" />
        <el-table-column prop="province" label="所在城市">
          <template #default="{row}">
            {{ row.province }} {{ row.city }}
          </template>
        </el-table-column>
      </el-table>
      <div class="flex flex-end m-20">
        <el-pagination 
          background 
          layout="prev, pager, next" 
          :total="total" 
          v-model:current-page="queryParams.page" 
          v-model:page-size="queryParams.page_size" 
          @current-change="handleCurrentPage"
        />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.box {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  .content {
    width: 100%;
    height: 100%;
    color: $primary-color;
  }
}

.card-box {
  border-radius: 6px; 
  margin-bottom: 10px;
  padding-bottom: 2px; 
  background: #FFFFFF;
  padding: 20px;
}

</style>